<template>
  <div>
    <div>
      <template>
        <el-select v-model="orderState" placeholder="请选择订单状态" @change="selectOrderState">
          <el-option v-for="s in stateList" :key="s.value" :label="s.label" :value="s.value">
          </el-option>
        </el-select>
      </template>
      选择订单时间范围：
      <span class="block">
        <el-date-picker @change="selOrderTime" v-model="startEndTime" type="datetimerange" start-placeholder="开始日期"
          end-placeholder="结束日期" :default-time="['00:00:00']">
        </el-date-picker>
      </span>
      根据订单号查询：
      <el-input style="width: 200px;" placeholder="请输入订单编号" v-model="selOrderId" @change="selOrderById"></el-input>
    </div>

    <div v-for="o in getOrderList" style="margin-top: 20px;background-color: #fff4ee;text-align: center;">
      <div style="font-size: 15px;padding: 5px;border-bottom: 2px dashed #b3b7bc;text-align: left;background-color: #f4f4f4;
      font-style: oblique;">
        <el-row>
          <el-col :span="8">
            <div>
              订单编号：
              <span style="font-size: 13px;">{{o.orderId}}</span>
              <span style="font-size: 13px;" v-if="o.payState==13">
                &nbsp;&nbsp;(已转账支付)
              </span>
            </div>
          </el-col>
          <el-col :span="8">
            <div>
              地址：
              <span style="font-size: 13px;">{{o.address}}</span>
            </div>
          </el-col>
          <el-col :span="8" v-if="o.orderState==5">
            <div>
              站点取消原因：
              <span class="cancel_reason_text">
                {{o.refuseReason}}
              </span>
              <span style="font-size: 13px;">
                &nbsp;（{{o.cancelDate}}）
              </span>
            </div>
          </el-col>
          <el-col :span="8" v-if="o.orderState==6">
            <div>
              用户取消原因：
              <span class="cancel_reason_text">
                {{o.userCancelReason}}
              </span>
              <span style="font-size: 13px;">
                &nbsp;（{{o.cancelDate}}）
              </span>
            </div>
          </el-col>
          <el-col :span="8" v-if="o.orderState==7">
            <div>
              回收员取消原因：
              <span class="cancel_reason_text">
                {{o.recycleCancelReason}}
              </span>
              <span style="font-size: 13px;">
                &nbsp;（{{o.cancelDate}}）
              </span>
            </div>
          </el-col>
          <el-col :span="8" v-if="o.orderState==8">
            <div>
              系统取消原因：
              <span class="cancel_reason_text">
                超时未接单
              </span>
              <span style="font-size: 13px;">
                &nbsp;（{{o.cancelDate}}）
              </span>
            </div>
          </el-col>
        </el-row>
      </div>

      <div style="margin-top: 10px;">
        <el-row>
          <el-col :span="2">
            <div>
              下单时间
            </div>
            <div class="order_text">
              {{o.orderTime}}
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              预约取货时间
            </div>
            <div class="order_text">
              {{o.takeTime}}
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              接单时间
            </div>
            <div class="order_text">
              {{o.siteReceiveDate}}
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              订单总价
            </div>
            <div :class="getAllMoneyStyle(o.orderState)">
              {{o.orderPrice.toFixed(2)}}&nbsp;￥
            </div>
          </el-col>
          <!-- <el-col :span="2">
            <div>
              重量
            </div>
            <div class="order_text">
              {{o.weight}}&nbsp;kg
            </div>
          </el-col> -->
          <el-col :span="3">
            <div>
              出货人联系方式
            </div>
            <div class="order_text">
              {{o.orderPhone}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              订单备注
            </div>
            <div class="order_text">
              {{o.remarks}}
            </div>
          </el-col>
          <el-col :span="3">
            <div>
              物品图片信息
            </div>
            <div>
              <template v-if="o.goodsPhotos && o.goodsPhotos.length > 0">
                <el-image style="width: 80px; height: 80px" :src="o.goodsPhotos[0]" :preview-src-list="o.goodsPhotos">
                </el-image>
              </template>
            </div>
          </el-col>

          <el-col :span="3">
            <div>
              状态
            </div>
            <div class="order_text" style="color: #ff5500;font-size: 15px;">
              {{o.state}}
            </div>
          </el-col>
          <el-col :span="2">
            <div>
              操作
            </div>
            <div class="order_text">
              <el-button size="mini" style="width: 80px;" @click="siteCancelOrder(o.orderId)">取消订单</el-button>
            </div>
            <div class="order_text">
              <el-button size="mini" style="width: 80px;" @click="getOrderLogList(o.orderId)">查看日志</el-button>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 查看订单日志记录窗口 -->
      <el-dialog title="订单日志记录" :visible.sync="orderLogWindow" width="70%" center>
        <template>
          <el-table :data="orderLogList" border style="width: 100%">
            <el-table-column prop="logDate" label="时间" width="200">
            </el-table-column>
            <el-table-column prop="logDesc" label="描述">
            </el-table-column>
            <el-table-column prop="state" label="状态">
            </el-table-column>
            <el-table-column prop="logUser" label="操作人">
            </el-table-column>

          </el-table>
        </template>
      </el-dialog>

      <div
        style="text-align: left;padding: 5px;font-style: oblique;font-size: 5px;height: 40px;background-color: #fff4ee;"
        v-if="o.orderState!=5&&o.orderState!=6&&
      o.orderState!=7&&o.orderState!=8">
        <el-steps :simple="true" :active="o.orderState==9?5:o.orderState==10?6:o.orderState==11?7:o.orderState"
          finish-status="success">
          <el-step title="已接单"></el-step>
          <el-step title="取货中"></el-step>
          <el-step title="交易中"></el-step>
          <el-step title="转账"></el-step>
          <el-step title="取货"></el-step>
          <el-step title="返程"></el-step>
          <el-step title="到达站点"></el-step>
        </el-steps>
      </div>

      <!-- 取消订单窗口 -->
      <el-dialog title="取消订单原因" :visible.sync="cancelReasonWindow" width="30%" center>
        <el-input type="textarea" placeholder="取消原因" v-model="siteCancelReason"></el-input>
        <span slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="okToCancelOrder">确 定</el-button>
        </span>
      </el-dialog>
      <div style="text-align: center;">
        <el-collapse>
          <el-collapse-item title="查看订单物品详情" style="text-align: center;">
            <div v-for="d in o.orderDetailsDTOList" style="border-bottom: 1px solid #dfe4ea;">
              <el-row>
                <el-col :span="3">
                  <div class="details_header">
                    种类
                  </div>
                  <div :class="getStyleClass(d.state)">
                    {{d.kindName}}
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="details_header">
                    名称
                  </div>
                  <div :class="getStyleClass(d.state)">
                    {{d.name}}
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="details_header">
                    详情图
                  </div>
                  <div>
                    <el-image style="width: 80px; height: 80px;" :src="o.photo">
                    </el-image>
                  </div>
                </el-col>

                <el-col :span="4">
                  <div class="details_header">
                    重量&数量
                  </div>
                  <div :class="getStyleClass(d.state)">
                    {{d.weight}}&nbsp;{{d.units}}
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="details_header">
                    ￥/{{d.units}}
                  </div>
                  <div :class="getStyleClass(d.state)">
                    {{d.unitPrice}}
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="details_header">
                    总价
                  </div>
                  <div :class="getOrderDetailsMoneyStyle(d.state)">
                    {{d.price.toFixed(2)}}&nbsp;￥
                  </div>
                </el-col>
                <el-col :span="3">
                  <div class="details_header">
                    状态
                  </div>
                  <div class="order_details_text" style="color: #ff5500;font-size: 13px;">
                    {{d.state==0?"正常":"已撤销"}}
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="page_bottom">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.current"
        :page-sizes="[1,3,5, 7, 9, 11]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stateList: [{
            value: '',
            label: '选择所有'
          },
          {
            value: '1',
            label: '已接单'
          }, {
            value: '2',
            label: '取货中'
          }, {
            value: '3',
            label: '交易中'
          }, {
            value: '4',
            label: '已转账支付'
          }, {
            value: '101',
            label: '已取消'
          }, {
            value: '9',
            label: '已取货'
          }, {
            value: '10',
            label: '已返程'
          }, {
            value: '11',
            label: '已到站'
          }
        ],
        getOrderList: [],
        orderState: "", //订单状态
        pageNum: 1, //页数
        pageSize: 3, //每页的数量
        startTime: "", //查询订单的起始时间
        endTime: "", //查询订单的就结束时间
        page: {}, //分页对象
        startEndTime: "", //订单查询范围起始时间
        selOrderId: "", //订单编号
        siteCancelReason: "", //站点取消订单原因
        cancelReasonWindow: false, //输入取消订单原因弹窗
        cancelOrderId: "", //取消的订单id
        isFixed: false,
        orderLogOrderId: "", //查看订单日志记录的订单id
        orderLogWindow: false, //订单日志记录数据窗口
        orderLogList: [], //订单日志记录集合
      }
    },
    // //mounted生命周期钩子函数中，添加一个滚动事件监听器，监听滚动事件，并根据滚动位置来更新isFixed变量的值
    // mounted() {
    //   window.addEventListener('scroll', this.handleScroll);
    // },
    // //beforeDestroy生命周期钩子函数中，移除滚动事件监听器，以防止内存泄漏
    // beforeDestroy() {
    //   window.removeEventListener('scroll', this.handleScroll);
    // },
    methods: {
      // handleScroll() {
      //   // 获取滚动的垂直位置
      //   const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      //   // 判断滚动位置是否超过某个阈值，例如100px
      //   this.isFixed = scrollTop > 100;
      // },
      //查看订单日志记录
      getOrderLogList(orderId) {
        this.orderLogOrderId = orderId
        this.orderLogWindow = true
        this.loadOrderLogList()
      },
      //获取订单日志记录数据
      loadOrderLogList() {
        this.$http.post("/order/orderLog/getOrderLogList.site?orderId=" + this.orderLogOrderId).then(resp => {
          if (resp.data.flag) {
            this.orderLogList = resp.data.data
          } else {
            this.orderLogList = []
          }
        })
      },
      cancel() {
        this.cancelReasonWindow = false
        this.siteCancelReason = ""
        this.cancelOrderId = ""
      },
      siteCancelOrder(orderId) {
        this.cancelOrderId = orderId
        this.cancelReasonWindow = true
      },
      //站点管理员取消订单
      okToCancelOrder() {
        this.$http.post("/order/recycleOrder/siteCancelOrder.site", {
          orderId: this.cancelOrderId,
          cancelReason: this.siteCancelReason
        }).then(resp => {
          alert(resp.data.message)
          if (resp.data.flag) {
            this.cancelReasonWindow = false
            this.siteCancelReason = ""
            this.cancelOrderId = ""
            this.getSiteOrderList()
          }
        })
      },
      //根据订单id查询
      selOrderById() {
        this.orderState = ""
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: this.orderState,
          pageNum: 1,
          pageSize: 3,
          startTime: this.startTime,
          endTime: this.endTime,
          orderId: this.selOrderId
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.getOrderList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      //日期格式设置为本地时间字符串
      setTime(dateTimeString) {

        const date = new Date(dateTimeString);
        const utcDateTimeString = date.toLocaleString();
        return utcDateTimeString;
      },
      //选择订单日期时间
      selOrderTime() {
        if (this.startEndTime != null && this.startEndTime.length > 0) {
          this.startTime = this.setTime(this.startEndTime[0])
          this.endTime = this.setTime(this.startEndTime[1])
        } else {
          this.startTime = ""
          this.endTime = ""
        }
        this.getSiteOrderList()
      },
      //选择订单状态
      selectOrderState() {
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: this.orderState,
          pageNum: 1,
          pageSize: 3,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.getOrderList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      handleSizeChange(val) {
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: this.orderState,
          pageNum: this.page.current,
          pageSize: val,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.getOrderList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      handleCurrentChange(val) {
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: this.orderState,
          pageNum: val,
          pageSize: this.page.size,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.getOrderList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      getSiteOrderList() {
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: this.orderState,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            if(resp.data.data.records==null||resp.data.data.records.length==0){
              this.getOrderList=[]
            }else{
              this.getOrderList = resp.data.data.records
            }
          } else {
            alert(resp.data.message)
          }
        })
      },
      //动态获取订单子项的总价的样式
      getOrderDetailsMoneyStyle(state) {
        if (state == 1) {
          return "order_money_text_cancel";
        } else {
          return "order_money_text";
        }
      },
      //动态获取样式
      getStyleClass(state) {
        if (state == 1) {
          return "order_details_text_cancel";
        } else {
          return "order_details_text";
        }
      },
      //订单总价动态获取样式
      getAllMoneyStyle(state) {
        if (state == 5 || state == 6 || state == 7 || state == 8) {
          return "order_money_text_cancel";
        } else {
          return "order_money_text"
        }

      },
    },
    created() {
      this.getSiteOrderList()
    }
  }
</script>

<style>
  /* .fixed-div {
    position: fixed;
    top: 0;
  } */
  .order_money_text_cancel {
    margin-top: 15px;
    text-decoration: line-through;
    font-weight: bold;
    color: #ababab;
    font-size: 15px;
  }

  .order_money_text {
    margin-top: 15px;
    font-weight: bold;
    color: #ff5500;
    font-size: 15px;
  }

  .cancel_reason_text {
    font-size: 13px;
    color: #ff5500;
    font-weight: bold;
  }

  .page_bottom {
    margin-top: 15px;
  }

  .details_header {
    font-style: oblique;
  }

  .order_details_text_cancel {
    text-decoration: line-through;
    color: #ababab;
    font-weight: bold;
    margin-top: 15px;
  }

  .order_details_text {
    margin-top: 15px;
  }

  .order_text {
    margin-top: 15px;
    font-size: 12px;
  }
</style>
